<template>
  <div class="Page_ClassifyStyleBox">
    <div class="Page_ClassifyStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_ClassifyStyleRightBox">
      <div class="Page_ClassifyStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_ClassHeaderStyleBreadcrumb">
        <a-breadcrumb class="Breadcrumb">
          <a-breadcrumb-item><a href="/home">工作台</a></a-breadcrumb-item>
          <a-breadcrumb-item><a href="/list">所有文章</a></a-breadcrumb-item>
          <a-breadcrumb-item
            ><a href="/classify">分类管理</a></a-breadcrumb-item
          >
        </a-breadcrumb>
      </div>
      <div class="Page_ClassifyStyleBoxContext">
        <div class="Page_ClassFromConTextStyleBox">
          <div>
            <a-card
              size="small"
              title="添加分类"
              style="width: 500px; height: auto"
            >
              <p>
                <input
                  v-model="forFrom.title"
                  type="text"
                  class="SaveInput"
                  placeholder="输入分类名称"
                  value
                />
              </p>
              <p>
                <input
                  type="text"
                  class="SaveInput"
                  placeholder="输入分类值（请输入英文，作为路由使用）"
                  value
                />
              </p>
              <a-button type="primary" @click="save()">保存</a-button>
            </a-card>
          </div>
          <div>
            <a-card
              size="small"
              title="所有分类"
              style="
                width: 800px;
                height: auto;
                marinleft: 200px;
                display: inline-block;
              "
            >
              <a-tag
                v-for="(item, idx) in MockArrayAdd"
                :key="idx"
                color="#f50"
                @click="DelMock(item)"
                >{{ item.title }}</a-tag
              >
            </a-card>
          </div>
        </div>
        <div v-if="isShow" class="ClassifyRenewalBox">
          <p>
            <a-button @click="warning" type="primary">更新</a-button>
            <a-button @click="ReturnAdd">返回添加</a-button>
          </p>
          <p>
            <a-button @click="DelMockTitle" danger ghost
              ><DetQuntr></DetQuntr
            ></a-button>
          </p>
        </div>
        <dl style="textalign: center; margintop: 20px">
          <dt>
            <a href="https://github.com/fantasticit/wipi"
              ><img src="../../assets/b.png.png" alt=""
            /></a>
          </dt>
          <dd>Copyright ® 2022 Designed by Fantasticit.</dd>
        </dl>
      </div>
    </div>
  </div>
</template>


<script>
import { message } from "ant-design-vue";
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
import DetQuntr from "../../components/DetQuntr/index.vue";
import Axios from "axios";
export default {
  data() {
    return {
      ClassifyMockArray: [],
      MockArrayAdd: [],
      forFrom: {
        title: "",
      },
      text: "",
      isShow: false,
    };
  },

  created() {
    this.save(); //弹框
  },
  methods: {
    async ClassifyMockAdd() {
      let res = await Axios.get("/api/InertMock");
      this.MockArrayAdd = res.data.data;
    },
    async save() {
      let res = await Axios.post("/api/addMock", { ...this.forFrom });
      message.success(res.data.message);
      this.ClassifyMockAdd();
    },
    //返回添加
    ReturnAdd() {
      this.isShow = false;
    },

    async DelMock(item) {
      if (item) {
        this.isShow = true;
        this.forFrom.title = item.title;
        this.ClassifyMockAdd();
      } else {
        this.ClassifyMockAdd();
      }
    },
    warning() {
      message.warning("访客无权进行该操作");
    },
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    DetQuntr,
  },
};
</script>

<style>
.Page_ClassifyStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_ClassifyStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #001529;
  border-right: 1px solid #ccc;
}
.Page_ClassifyStyleRightBox {
  flex: 1;
}
.Page_ClassifyStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_ClassifyStyleBoxContext {
  width: 100%;
  height: 100%;
  background: #eff2f5;
}
.Page_ClassFromConTextStyleBox {
  width: 1423px;
  height: 500px;
  margin-left: 20px;
  background: #eff2f5;
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: space-between;
}
.Page_ClassHeaderStyleBreadcrumb {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Breadcrumb {
  margin-top: 10px;
  margin-left: 20px;
  display: inline-block;
}
.SaveInput {
  width: 97%;
  height: 35px;
  padding: 5px;
  box-shadow: #409cf1;
}
.ClassifyRenewalBox {
  width: 498px;
  height: 55px;
  background: #fff;
  position: absolute;
  top: 380px;
  left: 260px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>